import React, { memo,/* useState , */useReducer} from 'react'


function reducer(state, action) {
  switch (action.type) {
    case 'add_number':
      return {...state, count: state.count + action.number }
    case 'sub_number':
      return { ...state, count: state.count - action.number }
    default:
      break;
  }
}
/* const App = memo(() => {
  const [count, setCount] = useState(100);
  return (
    <div>
      <p>App: {count}</p>
      <button onClick={e=>setCount(count+1)}>+1</button>
      <button onClick={e=>setCount(count-3)}>-3</button>
      <button onClick={e=>setCount(count+5)}>+5</button>
      <button onClick={e=>setCount(count-1)}>-4</button>
    </div>
  )
}) */
const App = memo(() => {
  const [state,dispatch] = useReducer(reducer, { count: 100 });
  return (
    <div>
      <p>App: {state.count}</p>
      <button onClick={e => dispatch({ type: 'add_number', number :1})}>+1</button>
      <button onClick={e => dispatch({ type: 'sub_number',number: 3 })}>-3</button>
      <button onClick={e => dispatch({ type: 'add_number', number: 5 })}>+5</button>
      <button onClick={e => dispatch({ type: 'sub_number', number: 4 })}>-4</button>
    </div>
  )
})

export default App
